<template>
  <div ref="divRef">
    App {{ count }} {{ a }} {{ person.name }} {{ oddOrEven }}
  </div>
  <button @click="handleClick">按钮</button>
  <Child ref="childRef" :person="person" @setCount="handleClick" />
</template>

<script lang="ts" setup>
/*
  setup语法糖: 
    1. 使用: 在 script 标签上写 setup 属性
    2. 作用：
      - 当前 script 相当于 setup 函数
      - 引入组件会自动注册
      - 定义数据会自动暴露
*/
import { ref, reactive, watch, computed, onMounted } from "vue";
// 引入组件会自动注册
import Child from "./views/child/index.vue";

// ref 可以用来获取真实DOM或组件实例对象 -> 定义同名ref的数据，那么同名ref的数据就能获取到这个内容
const divRef = ref();
console.log(divRef.value); // undefined
const childRef = ref();

// 定义数据会自动暴露
const count = ref(0);
const person = reactive({ name: "jack" });

const handleClick = () => {
  count.value++;
};

let a = 123;

watch(count, (count) => {
  console.log(count);
});
const oddOrEven = computed(() => {
  return count.value % 2 === 0 ? "偶数" : "奇数";
});

onMounted(() => {
  console.log("onMounted");
  console.log(divRef.value); // 有值
  console.log(childRef.value); // 有值
});
</script>

<style></style>
